學習日誌23-BOM(瀏覽器功能探索)

第 11 屆 iThome 鐵人賽

DAY 23

自我挑戰組

JavaScript學習日誌系列第 23 篇

11th鐵人賽

古德瑞

2019-10-08 22:14:33

595 瀏覽

分享至

BOM (Browser Object Model)

瀏覽器透過windows可以操控瀏覽器，或得知瀏覽器資訊

history : 瀏覽器的歷史資訊
frames : 操控 iframes 相關功能
location : 目前瀏覽網頁網址資料操控
DOM : 可以操控 DOM 元素
screen : 目前載具螢幕大小控制
navigator : 目前瀏覽器版本資訊

window.history 回到上下頁面

使用瀏覽器歷史資訊，針對已經操控過有紀錄的頁面來返回上一頁或下一頁，
指定好按鈕後用**.onclick**來觸發

window.history.back() 返回上一頁
window.history.forward() 返回下一頁

//第一頁
<a href="b.html">連到第二頁</a>
<a href="#" id="next">下一頁</a>
<script>
    document.getElementById('next').onclick = function () {
        window.history.forward();
    }
</script>

//第二頁
<a href="#" id="back">上一頁</a>
<script>
    document.getElementById('back').onclick = function () {
            window.history.back();
    }
</script>

列印、location、開新視窗

window.print() 直接開啟列印功能
location 知道目前網頁網址資訊
window.open() 裡頭帶網址參數就可以開新視窗到那網頁去

//html
<input type="button" id="print" value="列印">
<input type="button" id="locat" value="瀏覽location資訊">
<input type="button" id="open" value="移動到google首頁">

//JS
document.getElementById('print').onclick = function () {
    window.print()
}
document.getElementById('locat').onclick = function () {
    console.log(location)
}
document.getElementById('open').onclick = function () {
    window.open('http://www.google.com.tw')
}

動態擷取瀏覽器高度

window.innerHeight 瀏覽器內視窗高度
window.outerHeight 整個瀏覽器的高度

指定 .box 的高度等同於瀏覽器內視窗的高度
用 window.onresize 去觸發重新計算高度的函式

//html
<body>
    <div class="box"></div>
</body>

//JS
document.querySelector('.box').style.height = window.innerHeight+"px"

window.onresize = function(){
   document.querySelector('.box').style.height = window.innerHeight+"px"
}